/**
 * Created by Administrator on 2017/5/20 0020.
 */
window.onload=function(){
    var oul=$('.imgs')[0]
    var ulis=oul.children;
    var odots=$(".dots")[0];
    var olis=odots.children;
    for(var i=0;i<ulis.length-1;i++){
        var newli=document.createElement("li")
        odots.appendChild(newli)
    }
    olis[0].className="current";

    for(var i=0;i<olis.length;i++){
            olis[i].index=i;
        olis[i].onmouseenter=function(){
            for(var j=0;j<olis.length;j++){
                olis[j].className=""
            }
            this.className="current";
            animate(oul,-this.index*ulis[0].offsetWidth)
           //console.log(-this.index*ulis[0].offsetWidth);
            key=square=this.index;
        }

    }
    var key=square=0;
    var timer=null;
    timer = setInterval(autoplay,1000)
    function autoplay(){
        key++;
        square++;
        if(key>ulis.length-1){
            key=1;
            oul.style.left=0;

        }
        animate(oul,-key*ulis[0].offsetWidth);
        for(var i=0;i<olis.length;i++){
            olis[i].className=""
        }
        if(square>2){
            square=0
        }
        olis[square].className="current";
       // console.log(key % (olis.length));

    }


    $(".banner")[0].onmouseover=function(){
        clearInterval(timer)
        //console.log($(".banner")[0])
    }
    $(".banner")[0].onmouseout=function(){
       timer= setInterval(
           autoplay,1000)

    }




    function animate(obj,target) {
        clearInterval(obj.timer);  // 要开启定时器，先清除以前定时器
        // 有2个参数 第一个 对象谁做动画  第二 距离 到哪里
        // 如果 offsetLeft 大于了  target 目标位置就应该反方向
        var speed = obj.offsetLeft < target ? 15 : -15;
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft;  //  他们的值 等于 0 说明完全相等
            // 动画的原理
            obj.style.left = obj.offsetLeft + speed  + "px";
            if(Math.abs(result) <= 15) {
                obj.style.left = target + "px";   //抖动问题
                clearInterval(obj.timer);
            }
        },10);
    }


}